import React, { useState, useEffect } from 'react'
import "./index.css"
import { Tabs, message, Card } from 'antd'
import HealthCode from './HealthCode'
import PersonnelQuantity from './PersonnelQuantity'
import { fetchRequest } from '@/utils/Request'
import { url } from '@/utils/url'

const { TabPane } = Tabs;



function Index() {
    const [options, setOptions] = useState<any>('');   // 下拉框数据
    const [listData, setlistData] = useState<any>({}); // 列表数据
    const [pieData, setpieData] = useState<any>([{
        name: '正常',
        value: 0
    },
    {
        name: '告警',
        value: 0
    },
    {
        name: '危险',
        value: 0
    }]); // 饼图数据
    const [pieTitle, setpieTitle] = useState<any>("今日总量");
    const [personnelData, setpersonnelData] = useState<any>({}); //折线图总数居
    const [chartData, setchartData] = useState<any>({});
    const [TabsData, setTabsData] = useState(1)
    const onChange = (value: any) => {
        setOptions({
            deptId: typeof value === "undefined" ? "" : value,
        })
    }
    useEffect(() => {

    }, [pieData, chartData])

    // 查询按钮
    const query = async () => {
        let params = {
            deptId: options.deptId,
        }
        const URLLIST = TabsData == 1 ? url.GET_HEALTH_CODE_DATA : url.POST_REALTIMEDATABY
        const URLPIC = TabsData == 1 ? url.GET_PERSONNEL : url.POST_TOTALPERSON
        try {
            const json = await fetchRequest(URLLIST, params);
            if (json.success) {
                setlistData(json.data)
                if (json.data.sky) {
                    setpieData(json.data.sky)
                }
            } else {
                message.error(json.result)
            }
        } catch (error: any) {
            message.error(error.error)

        }

        try {
            const json = await fetchRequest(URLPIC, params);
            if (json.success) {
                setpersonnelData(json.data)
                if (json.data.totalPersonCurveVosByDay) {
                    let visitPeriod: any = [], visitNumber: any = []
                    json.data.totalPersonCurveVosByDay.map((item: any) => {
                        visitPeriod.push(item.visitPeriod)
                        visitNumber.push(item.visitNumber)
                    })
                    setchartData({ visitPeriod: visitPeriod, visitNumber: visitNumber })
                }
            } else {
                message.error(json.result)
            }
        } catch (error: any) {
            message.error(error.message)

        }
    }

    // 饼图按钮事件
    const ButClick = (value: any) => {
        if (Object.values(listData).length > 0) {
            setpieData(listData[value])
        }
        if (value === "sky") {
            setpieTitle("今日总量")
        } else if (value === "week") {
            setpieTitle("本周总量")
        } else if (value === "month") {
            setpieTitle("本月总量")
        }
    }

    const TabsChange = (val: any) => {
        setTabsData(val)
        setlistData({sky: [
            {
                name: '正常',
                value: 0
            },
            {
                name: '告警',
                value: 0
            },
            {
                name: '危险',
                value: 0
            }
        ],
        week: [
            {
                name: '正常',
                value: 0
            },
            {
                name: '告警',
                value: 0
            },
            {
                name: '危险',
                value: 0
            }
        ],
        month: [
            {
                name: '正常',
                value: 0
            },
            {
                name: '告警',
                value: 0
            },
            {
                name: '危险',
                value: 0
            }
        ],})
        setpersonnelData({})
        setpieData([{
            name: '正常',
            value: 0
        },
        {
            name: '告警',
            value: 0
        },
        {
            name: '危险',
            value: 0
        }])
        setchartData({})
        setpieTitle("今日总量")
    }
    // 折线图按钮事件
    function setpersonnelDatas(value: any) {
        if (Object.values(personnelData).length > 0) {
            let visitPeriod: any = [], visitNumber: any = []
            personnelData[value].map((item: any) => {
                visitPeriod.push(item.visitPeriod)
                visitNumber.push(item.visitNumber)
            })
            setchartData({ visitPeriod: visitPeriod, visitNumber: visitNumber })
        }
    }


    return (
        <div className="Personnel">
            <div className="TabTitle">
                <Tabs className={'achievement-tab'} onChange={TabsChange}>
                    <TabPane key={1} tab={'二维码统计'}>
                    </TabPane>
                    <TabPane key={2} tab={'智能学生证统计'}>
                    </TabPane>
                </Tabs>
                </div>
            <HealthCode query={query} onChange={onChange} ButClick={ButClick} listData={listData} pieData={pieData}
                pieTitle={pieTitle} />
            <PersonnelQuantity chartData={chartData} setpersonnelDatas={setpersonnelDatas} />
        </div>
    )
}

export default Index